<template>
  <div class="whole">
    <div v-if="FoodInfo.img">
      <img :src="FoodInfo.img" alt>
      <div class="context">
        <p class="title">{{FoodInfo.title}}</p>
        <ul>
          <li class="hasmargin">
            <img :src="FoodInfo.list[0].img" alt>
            <p class="user">
              <img :src="FoodInfo.list[0].icon" alt>
              <span>{{FoodInfo.list[0].user}}</span>
            </p>
            <p class="desc">{{FoodInfo.list[0].desc}}</p>
            <div class="link-comment">
              <span>
                <i class="iconfont">&#xe613;</i>
                {{FoodInfo.list[0].like}}
              </span>
              <span class="right">
                <i class="iconfont">&#xf003b;</i>
                {{FoodInfo.list[0].comment}}
              </span>
            </div>
          </li>
          <!-- 列表二 -->

          <li>
            <img :src="FoodInfo.list[1].img" alt>
            <p class="user">
              <img :src="FoodInfo.list[1].icon" alt>
              <span>{{FoodInfo.list[1].user}}</span>
            </p>
            <p class="desc">{{FoodInfo.list[1].desc}}</p>
            <div class="link-comment">
              <span>
                <i class="iconfont">&#xe613;</i>
                {{FoodInfo.list[1].like}}
              </span>
              <span class="right">
                <i class="iconfont">&#xf003b;</i>
                {{FoodInfo.list[1].comment}}
              </span>
            </div>
          </li>

           <li class="hasmargin">
            <img :src="FoodInfo.list[1].img" alt>
            <p class="user">
              <img :src="FoodInfo.list[1].icon" alt>
              <span>{{FoodInfo.list[1].user}}</span>
            </p>
            <p class="desc">{{FoodInfo.list[1].desc}}</p>
            <div class="link-comment">
              <span>
                <i class="iconfont">&#xe613;</i>
                {{FoodInfo.list[1].like}}
              </span>
              <span class="right">
                <i class="iconfont">&#xf003b;</i>
                {{FoodInfo.list[1].comment}}
              </span>
            </div>
          </li>

          <li>
            <img :src="FoodInfo.list[1].img" alt>
            <p class="user">
              <img :src="FoodInfo.list[1].icon" alt>
              <span>{{FoodInfo.list[1].user}}</span>
            </p>
            <p class="desc">{{FoodInfo.list[1].desc}}</p>
            <div class="link-comment">
              <span>
                <i class="iconfont">&#xe613;</i>
                {{FoodInfo.list[1].like}}
              </span>
              <span class="right">
                <i class="iconfont">&#xf003b;</i>
                {{FoodInfo.list[1].comment}}
              </span>
            </div>
          </li>
        </ul>
      </div>
      <FootNav/>
    </div>
    <div v-else>正在加载数据...</div>
  </div>
</template>

<script>
import FootNav from "@/components/FootNav";
export default {
  name: "Food",
  components: {
    FootNav
  },
  data() {
    return {
      FoodInfo: {}
    };
  },
  mounted() {
    this.$api.FoodInfo.FoodList(null).then(res => {
      console.log(res.data);
      this.FoodInfo = res.data;
    });
  }
};
</script>
<style scoped lang="less">
.whole{
  margin-top: 5.2rem
}
img {
  width: 100%;
}
.whole .title {
  font-size: 0.8rem;
  padding: 10px 0 0 0;
  letter-spacing: 0.2rem;
  font-weight: 500;
  color: rgba(23, 24, 24, 1);
}
.context {
  padding: 0 10px;
  background-color: white;
  margin-bottom: 50px;
}
ul {
  // display: flex;
  // justify-content: space-between;
  overflow: hidden;
}
li {
  // flex-grow: 1;
  float: left;
  width: 8.5rem;
  margin-top: 10px;
  img {
    display: block;
    // vertical-align : middle;
    // 没有实现
    width: 8.5rem;
  }
  .user {
    padding: 5px 0;
    img {
      width: 1.4rem;
      display: inline-block;
    }
    span {
      margin-left: 15px;
      font-size: 14/20rem;
      color: rgba(139, 140, 140, 1);
      letter-spacing: 0.1rem;
    }
  }
  .desc {
    font-size: 16/20rem;
    color: rgba(23, 24, 24, 1);
  }
}
.hasmargin {
  margin-right: 15px;
}
.link-comment {
  margin-top: 5px;
  color: rgba(139, 140, 140, 1);
  i {
    font-size: 1rem;
    margin-right: 4px;
    vertical-align: middle;
  }
  font-size: 0.7rem;
}
.right {
  float: right;
}
</style>